<script lang="ts" setup>
import {
  addFoodOrderService,
  addOrderService,
  clientListService,
  foodListService,
  getFoodsByRidService,
  getRoomByIdService,
  offRoomService,
  openRoomService,
  technicianListService,
} from "@/api/normal";
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
const v = ref("");
const drawer = ref(false);
const innerDrawer = ref(false);

import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

//房间单价
let roomPrice = ref("129.0");

const technicians = ref([]);
const clients = ref([]);
const foods = ref([]);
//技师列表回显
const technicianList = async () => {
  let result = await technicianListService();
  technicians.value = result.data;
};
technicianList();
//客户列表回显
const clientList = async () => {
  let result = await clientListService();
  clients.value = result.data;
};
clientList();
//食物列表回显
const foodList = async () => {
  let result = await foodListService();
  foods.value = result.data;
};
foodList();

//选中食物
let foodId = ref();
//食物数量
let foodCount = ref();
//该房间所点食物
const foodData = ref([]);

let rooms = ref([]);
//房间数据模型
let roomform = ref({
  id: "",
  clientId: "",
  technicianId: "",
  createTime: "",
  money: "",
});

//获取房间id
const getRoomId = () => {
  const { value } = v;
  const date = new Date(value);
  const day = date.getDate();
  return day;
};

//点击后根据id获取房间详情
const roomDetails = async () => {
  //判断房间id是否大于0
  if (getRoomId() > 0) {
    let result = await getRoomByIdService(getRoomId(), roomPrice.value);
    roomform.value = result.data;
    drawer.value = true;
  }
};

//开房按钮文本内容
let btnKf = ref("");

//点击开房按钮事件函数
const openRoom = async () => {
  let result = await openRoomService(roomform.value);
  ElMessage.success("开房成功");

  //重新获取房间信息
  roomDetails();
};
//退房按钮
const offRoom = async () => {
  //重置房间信息
  let result = await offRoomService(roomform.value.id);
  ElMessage.success("退房成功");
  foodId.value = "  ";
  foodCount.value = "";
  //重新获取房间信息
  roomDetails();
};

//下单小吃函数
const addFood = async () => {
  if (roomform.value.createTime) {
    let result = await addFoodOrderService({
      roomId: roomform.value.id,
      foodId: foodId.value,
      foodCount: foodCount.value,
    });
    ElMessage.success("下单成功");
    innerDrawer.value = false;
  } else {
    ElMessage.error("该房间还未开启");
  }
};

//获取该房间所下单食物列表函数
const getFoodsByRid = async () => {
  let result = await getFoodsByRidService(roomform.value.id);
  foodData.value = result.data;
};

//结账生成订单函数
const addOrder = async () => {
  let result = await addOrderService(roomform.value);
  drawer.value = false;
  ElMessage.success("结账成功");
};
</script>

<template>
  <el-calendar
    :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]"
    v-model="v"
    @click="roomDetails"
  />
  <!-- 房间详情(抽屉) -->
  <el-drawer v-model="drawer" title="房间详情" :with-header="true"
    ><el-form :model="roomform" label-width="auto" style="max-width: 600px">
      <el-form-item label="房间单价:">
        <el-input
          v-model="roomPrice"
          style="width: 240px"
          disabled
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="客户：">
        <el-select
          v-model="roomform.clientId"
          placeholder="未选择"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in clients"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.name }}</span>
            <span
              style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
            >
              id:{{ item.id }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="技师：">
        <el-select
          v-model="roomform.technicianId"
          placeholder="未选择"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in technicians"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.name }}</span>
            <span
              style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
            >
              id:{{ item.id }}
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="食物：">
        <div>
          <el-button
            @click="
              innerDrawer = true;
              getFoodsByRid();
            "
            >查看详情</el-button
          >
          <el-drawer v-model="innerDrawer" title="食物详情" :append-to-body="true">
            <el-form-item label="食物：">
              <el-select v-model="foodId" placeholder="未选择" style="width: 240px">
                <el-option
                  v-for="item in foods"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span
                    style="
                      float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;
                    "
                  >
                    {{ item.price }} ￥
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量：">
              <el-input-number
                v-model="foodCount"
                :min="1"
                :max="10"
                placeholder="数量"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addFood">点单</el-button>
              <el-button @click="innerDrawer = false">关闭</el-button>
            </el-form-item>
            <el-form-item>
              <div style="color: dimgrey; font-size: 20px"><b>小吃消费记录：</b></div>
              <el-table :data="foodData" height="250" style="width: 100%">
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column prop="price" label="总价" width="180" />
                <el-table-column prop="count" label="数量" />
              </el-table>
            </el-form-item>
          </el-drawer>
        </div>
      </el-form-item>
      <el-form-item label="开房时间：">
        <p style="text-align: center; width: 230px">
          {{ roomform.createTime ? roomform.createTime : "暂无" }}
        </p>
      </el-form-item>
      <el-form-item label="消费金额：">
        <p style="text-align: center; width: 230px">{{ roomform.money }}￥</p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOrder">结账</el-button>
        <el-button @click="roomform.createTime ? offRoom() : openRoom()">{{
          roomform.createTime ? "退房" : "开房"
        }}</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
